import { defineComponent, h, ref } from "vue";
import { Slider, Icon } from "vant";
import { getPicUuidApi, verificationApi } from "@/api/imgVerification";
import { delay } from "@/utils/timer";
import { mountComponent } from "@/utils/component";

import PopupComp from "../popup/popup.vue";
import "vant/es/slider/style";
import "vant/es/icon/style";
import "./slider.less";

const imgOptions = { width: 679, height: 382, scale: 0.4 };
const fillOptions = { width: 90 };
const triggerOptions = { height: 24 };
const baseSize = { design: 37.5, current: window.innerWidth / 10 };

const CheckSlider = defineComponent({
  setup(props, { expose }) {
    let uuid = "";
    let smsId = "";
    let showCallback: ((id: string) => void) | null = null;

    const imgWidth = imgOptions.width * imgOptions.scale;
    const imgHeight = imgOptions.height * imgOptions.scale;
    const fillWidth = fillOptions.width * imgOptions.scale;
    const triggerHeight =
      (triggerOptions.height / baseSize.design) * baseSize.current;
    const sliderMax = imgWidth - fillWidth;
    const sliderHeight = triggerHeight * 0.6667;

    const visible = ref(false);
    const finish = ref(false);
    const imgUrl = ref("");
    const fillUrl = ref("");
    const sliderValue = ref(0);

    const refreshImg = () => {
      getPicUuidApi().then((resp) => {
        uuid = resp.uuid;
        imgUrl.value = `/api/v1/img_verification/get_parent_pic?uuid=${uuid}`;
        fillUrl.value = `/api/v1/img_verification/get_child_pic?uuid=${uuid}`;
      });
    };
    const sliderChange = (value: number) => {
      verificationApi(
        {
          uuid: uuid,
          value: value / imgOptions.scale,
        },
        false
      )
        .then((resp) => {
          finish.value = true;
          showCallback?.(resp.sms_id);
          smsId = resp.sms_id;
          delay(1000).then(() => (visible.value = false));
        })
        .catch(() => {
          sliderValue.value = 0;
          refreshImg();
        });
    };

    expose({
      show: (callback: (id: string) => void) => {
        if (finish.value) return callback?.(smsId);
        visible.value = true;
        refreshImg();
        showCallback = callback;
      },
    });
    return () =>
      h(
        PopupComp,
        {
          modelValue: visible.value,
          closeable: true,
          style: { transform: "translateY(-60%)" },
          "onUpdate:modelValue": (value: boolean) => (visible.value = value),
        },
        () =>
          h("div", { class: "check-slider" }, [
            h("div", {
              class: "check-slider-title",
              innerHTML: "拖动下方滑块完成拼图",
            }),
            h(
              "div",
              {
                class: "check-slider-content",
                style: { width: `${imgWidth}px`, height: `${imgHeight}px` },
              },
              imgUrl.value
                ? [
                    h("img", { class: "check-slider-img", src: imgUrl.value }),
                    h("img", {
                      class: "check-slider-fill",
                      src: fillUrl.value,
                      style: {
                        width: `${fillWidth}px`,
                        left: `${sliderValue.value}px`,
                      },
                    }),
                  ]
                : []
            ),
            h(
              "div",
              {
                class: "check-slider-bar",
                style: { paddingRight: `${fillWidth}px` },
              },
              h(
                Slider as any,
                {
                  modelValue: sliderValue.value,
                  max: sliderMax,
                  activeColor: "transparent",
                  style: { height: `${sliderHeight}px` },
                  "onUpdate:modelValue": (value: number) =>
                    (sliderValue.value = value),
                  onChange: sliderChange,
                },
                {
                  button: () =>
                    h(
                      "div",
                      {
                        class: "check-slider-btn",
                        style: {
                          width: `${fillWidth}px`,
                          height: `${triggerHeight}px`,
                        },
                      },
                      h(Icon as any, {
                        name: finish.value ? "success" : "pause",
                      })
                    ),
                }
              )
            ),
          ])
      );
  },
});

export default {
  check: (callback: (id: string) => void) => {
    const { instance, unmount } = mountComponent(CheckSlider);
    (instance as any).show((id: string) => {
      callback(id);
      unmount();
    });
  },
};
